<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单管理页面</title>
    <link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.js"></script>
    <!--3.验证规则样式-->
    <link href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">
    <!--4.核心验证文件-->
    <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
    <!--5.中文校验-->
    <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/language/zh_CN.js"></script>

    <link rel="stylesheet" href="css/ordercss/pagination.css">
    <script src="js/orderjs/constants.js"></script>
    <script src="./js/orderjs/qrcode.js"></script>
    <script>
        //时间格式化函数
        function timeFormat(data) {
            let date = new Date(data)
            let Y = date.getFullYear() + '-'
            let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
            let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
            let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
            let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
            let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
            return Y + M + D + h + m + s
        }

        let currentPage = 1;
        let totalCount = 0;

        //请求返回【订单表】内容，params为请求参数，注意解析规则为后台返回的是PageUtils对象
        function pageContent(url, params) {
            $.get(url, params, function (result) {
                if (result.status === 200) {
                    //获取page对象
                    let pageObj = result.data;
                    //获取总页数
                    totalCount = pageObj.totalCount;
                    //获取当前页
                    currentPage = pageObj.currentPage;

                    for (let i = 0; i < pageObj.data.length; i++) {
                        let cate = pageObj.data[i];

                        $("#tableBody").append(
                            $("<tr>").append(
                                //订单号
                                $("<td>").text(cate.sid).addClass("text-center")
                            ).append(
                                //客户名称
                                $("<td>").text(cate.clientName).addClass("text-center")
                            ).append(
                                //客户手机
                                $("<td>").text(cate.clientPhone).addClass("text-center")
                            ).append(
                                //支付状态
                                $("<td>").text(cate.orderState === 1 ? "已支付" : "未支付").addClass("text-center")
                            ).append(
                                //创建时间
                                $("<td>").text(timeFormat(cate.createTime)).addClass("text-center")
                            ).append(
                                $("<td>").text(cate.isDelete === 1 ? "已完成" : "进行中").addClass("text-center")
                            ).append(
                                $("<td>").append(
                                    $("<button type='button' class='btn btn-info'>查看详情</button>").click(
                                        function () {
                                            //跳转到详情界面(通过订单号关联)
                                            location.href = "orderDetial.html?sid=" + cate.sid;
                                        }
                                    )
                                ).addClass("text-center")
                            )
                        )
                    }

                    //因为每个请求的params是不同的，可以根据params的内容进行页码区分（设置类不同）
                    if (params.state != undefined) {
                        //先清除之前的页码。重新按照totalCount分配页码
                        let firstLi = $("#pageManager > li").first()
                        let lastLi = $("#pageManager > li").last()
                        // console.log(firstLi.children())
                        firstLi.children().attr("class", "statePageFirst");         //修改li中的a标签属性为statePageFirst
                        lastLi.children().attr("class", "statePageLast");

                        $("#pageManager").html("");
                        $("#pageManager").append(firstLi);
                        let pageNum = totalCount % params.pageSize === 0 ? totalCount / params.pageSize : totalCount / params.pageSize + 1
                        for (let j = 1; j <= pageNum; j++) {
                            $("#pageManager").append(
                                $("<li><a href='javascript:void(0)' value='" + j + "' class='statePage'>" + j + "</a></li>")
                            )
                        }
                        $("#pageManager").append(lastLi)
                    } else if (params.startTime != undefined && params.endTime != undefined) {
                        //先清除之前的页码。重新按照totalCount分配页码
                        let firstLi = $("#pageManager > li").first()
                        let lastLi = $("#pageManager > li").last()
                        // console.log(firstLi.children())
                        firstLi.children().attr("class", "datePageFirst");         //修改li中的a标签属性为statePageFirst
                        lastLi.children().attr("class", "datePageLast");

                        $("#pageManager").html("");
                        $("#pageManager").append(firstLi);
                        let pageNum = totalCount % params.pageSize === 0 ? totalCount / params.pageSize : totalCount / params.pageSize + 1
                        for (let j = 1; j <= pageNum; j++) {
                            $("#pageManager").append(
                                $("<li><a href='javascript:void(0)' value='" + j + "' class='datePage'>" + j + "</a></li>")
                            )
                        }
                        $("#pageManager").append(lastLi)
                    } else {
                        //先清除之前的页码。重新按照totalCount分配页码
                        let firstLi = $("#pageManager > li").first()
                        let lastLi = $("#pageManager > li").last()

                        $("#pageManager").html("");
                        $("#pageManager").append(firstLi);
                        let pageNum = totalCount % params.pageSize === 0 ? totalCount / params.pageSize : totalCount / params.pageSize + 1
                        for (let j = 1; j <= pageNum; j++) {
                            $("#pageManager").append(
                                $("<li><a href='javascript:void(0)' value='" + j + "' class='indexPage'>" + j + "</a></li>")
                            )
                        }
                        $("#pageManager").append(lastLi)
                    }

                }

            })
        }

        //分页展示的方法
        function pageShow(page, size) {
            let params = {
                page: page,
                pageSize: size
            }
            pageContent(PAGE_SHOW_URL, params)
        }

        //订单号搜索方法（因为返回的是订单表的内容，可以调用pageContent函数）
        //订单号搜索是精确查询，只有一条记录，不需要实现分页效果
        function orderSearch(sid) {
            $("#tableBody").html("")
            let data = {
                sid: sid
            }
            pageContent(ORDER_SEARCH_BY_SID, data);
        }

        //手机号和支付状态的联合选择查询的方法
        //同一个手机号可以有多条订单，需要用到分页效果（所以要传递page和pageSize参数）
        function phoneSearch(phone, state, page, pageSize) {
            $("#tableBody").html("");
            let data = {
                phone: phone,
                state: +state,
                page: page,
                pageSize: pageSize
            }
            pageContent(ORDER_SEARCH_BY_PHONE_STATE, data)
        }

        //日期的范围查询
        function dateOrderSearch(startTime, endTime, page, pageSize) {
            let data = {
                startTime: startTime,
                endTime: endTime,
                page: page,
                pageSize: pageSize
            }
            if (data.startTime === "" || data.endTime === "") {
                alert("请输入完整的时间范围！")
            } else {
                $("#tableBody").html("");
                pageContent(ORDER_SEARCH_BY_DATE, data);
            }
        }

        $(function () {
            //初始页面page=1
            pageShow(1, 3);

            //订单搜索
            $("#orderSearchBtn").click(
                function () {
                    orderSearch($("#orderNumInput").val());
                }
            )

            //手机号和支付状态的联合选择查询
            $("#doubleSearchBtn").click(
                function () {
                    phoneSearch($("#phoneInput").val(), $("#paidState").val(), 1, 3)
                }
            )

            //日期查询
            $("#dateSearch").click(
                function () {
                    dateOrderSearch($("#startTime").val(), $("#endTime").val(), 1, 3);
                }
            )

            //点击页码分页效果
            // console.log($(".indexPage").text())
            //【重点】动态获取未加载新增元素的内容
            $("#pageManager").on("click", ".indexPage", function () {
                $("#tableBody").html("")
                pageShow(+$(this).text(), 3);
            })
            $("#pageManager").on("click", ".statePage", function () {
                $("#tableBody").html("")
                phoneSearch($("#phoneInput").val(), $("#paidState").val(), +$(this).text(), 3);
            })
            $("#pageManager").on("click", ".datePage", function () {
                dateOrderSearch($("#startTime").val(), $("#endTime").val(), +$(this).text(), 3);
            })

            //点击上一页
            $("#pageManager").on("click", ".forwardPage", function () {
                if (currentPage === 1) {
                    $(".forwardPage").attr("disabled", "disabled");
                } else {
                    $("#tableBody").html("")
                    pageShow(currentPage - 1, 3);
                }
            })
            //搜索支付状态或手机号后点击上一页
            $("#pageManager").on("click", ".statePageFirst", function () {
                if (currentPage === 1) {
                    $(".statePageFirst").attr("disabled", "disabled");
                } else {
                    $("#tableBody").html("")
                    phoneSearch($("#phoneInput").val(), $("#paidState").val(), currentPage - 1, 3);
                }
            })
            //搜索时间范围后点击上一页
            $("#pageManager").on("click", ".datePageFirst", function () {
                if (currentPage === 1) {
                    $(".datePageFirst").attr("disabled", "disabled");
                } else {
                    dateOrderSearch($("#startTime").val(), $("#endTime").val(), currentPage - 1, 3);
                }
            })

            //点击下一页
            $("#pageManager").on("click", ".nextPage", function () {
                let totalPage = totalCount % 3 === 0 ? (totalCount / 3) : Math.ceil(totalCount / 3);
                if (currentPage === totalPage) {
                    $(".nextPage").attr("disabled", "disabled")
                } else {
                    $("#tableBody").html("")
                    pageShow(currentPage + 1, 3);
                }
            })
            //搜索支付状态或手机号后点击下一页
            $("#pageManager").on("click", ".statePageLast", function () {
                let totalPage = totalCount % 3 === 0 ? (totalCount/3) : Math.ceil(totalCount/3);
                if (currentPage === totalPage) {
                    $(".stataPageLast").attr("disabled", "disabled")
                } else {
                    $("#tableBody").html("")
                    phoneSearch($("#phoneInput").val(), $("#paidState").val(), currentPage + 1, 3);
                }
            })
            //搜索时间范围后点击下一页
            $("#pageManager").on("click", ".datePageLast", function () {
                let totalPage = totalCount % 3 === 0 ? (totalCount/3) : Math.ceil(totalCount/3);
                if (currentPage === totalPage) {
                    $(".datePageLast").attr("disabled", "disabled")
                } else {
                    dateOrderSearch($("#startTime").val(), $("#endTime").val(), currentPage + 1, 3);
                }
            })

        })

    </script>
</head>
<body>
<div class="container">

    <div class="navbar navbar-default clearfix">
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="请输入订单号" id="orderNumInput">
            </div>
            <button type="button" class="btn btn-default" id="orderSearchBtn">查询订单号</button>
        </form>
    </div>

    <div class="navbar navbar-default clearfix">
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                手机号：<input type="text" class="form-control" placeholder="请输入手机" id="phoneInput">
            </div>
            <div class="form-group">
                支付状态：<select id="paidState">
                <option value="0">未支付</option>
                <option value="1">已支付</option>
            </select>
            </div>
            <button type="button" class="btn btn-default" id="doubleSearchBtn">查询</button>
        </form>
    </div>

    <div class="navbar navbar-default clearfix">
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="date" class="form-control" id="startTime">
            </div>
            至
            <div class="form-group">
                <input type="date" class="form-control" id="endTime">
            </div>
            <button type="button" class="btn btn-default" id="dateSearch">查询</button>
        </form>
    </div>

    <table class="table table-bordered table-hover">
        <thead>
        <tr class="text-center">
            <td>订单号</td>
            <td>客户名称</td>
            <td>客户手机</td>
            <td>支付状态</td>
            <td>创建时间</td>
            <td>订单状态</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody id="tableBody">
        </tbody>
    </table>

    <nav aria-label="Page navigation">
        <ul class="pagination" id="pageManager">
            <li>
                <a href="#" aria-label="Previous" class="forwardPage">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>

            <li>
                <a href="#" aria-label="Next" class="nextPage">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>

</div>
</body>
</html>